<template>
  <div class="dashboard-editor-container">

    <panel-group @handleSetLineChartData="handleSetLineChartData" />

    <!--    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">-->
    <!--      <line-chart :chart-data="lineChartData" />-->
    <!--    </el-row>-->

    <!--    <el-row :gutter="32">-->
    <!--      <el-col :xs="24" :sm="24" :lg="8">-->
    <!--        <div class="chart-wrapper">-->
    <!--          <raddar-chart />-->
    <!--        </div>-->
    <!--      </el-col>-->
    <!--      <el-col :xs="24" :sm="24" :lg="8">-->
    <!--        <div class="chart-wrapper">-->
    <!--          <pie-chart />-->
    <!--        </div>-->
    <!--      </el-col>-->
    <!--      <el-col :xs="24" :sm="24" :lg="8">-->
    <!--        <div class="chart-wrapper">-->
    <!--          <bar-chart />-->
    <!--        </div>-->
    <!--      </el-col>-->
    <!--    </el-row>-->
    <!-- 查询和其他操作 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      highlight-current-row
    >
      <el-table-column label="序号" width="60" align="center">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备号" width="200" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.vin }}</span>
        </template>
      </el-table-column>
      <el-table-column label="总容量" width="150" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.batteryAllCapacity }}</span>
        </template>
      </el-table-column>
      <el-table-column label="SOC" width="100" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.soc }}%</span>
        </template>
      </el-table-column>
      <el-table-column label="名称" width="120" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="经度" width="100" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.longitude }}</span>
        </template>
      </el-table-column>
      <el-table-column label="纬度" width="100" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.latitude }}</span>
        </template>
      </el-table-column>
      <el-table-column label="数据时间" width="160" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.dataTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="在线状态" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.online == 0?"在线":"离线" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="告警情况" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.alarm == 0?"有告警":"无告警" }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="block">
      <el-pagination
        layout="total, prev, pager, next,sizes, jumper"
        :page-sizes="[10, 20, 30, 50]"
        :current-page.sync="listQuery.current"
        :page-size="listQuery.size"
        :total="listQuery.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import { query, getById, getRealTimeById, getHistoryByVin } from '@/api/battery/data'

const lineChartData = {
  newVisitis: {
    expectedData: [0, 120, 161, 134, 105, 160, 165],
    actualData: [0, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [0, 100, 121, 104, 105, 90, 100],
    actualData: [0, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: 'Index',
  components: {
    LineChart,
    PanelGroup,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      vin: '',
      id: '',
      slaveCommunicationAllToShow: [],
      battery: '80%',
      tableData: [],
      batteryVoltage: [],
      // 选中的弹窗参数
      selectedData: {},
      dialogVisible: false, // 控制弹出框
      realTimeData: {
        user: '',
        SOC: '',
        batteryCapacity: '',
        batteryType: '',
        highTemperature: '',
        iccid: '',
        putTime: '',
        voltage: '',
        electricCurrent: '',
        runStatus: '',
        imei: '',
        dataTime: ''
      },
      historyData: {
        user: '',
        SOC: ''
      },
      activeName: 'realTime',
      listQuery: {
        total: 0,
        current: 1,
        size: 20,
        vin: ''
      },
      listQuery1: {
        total: 0,
        current: 1,
        size: 20,
        vin: ''
      },

      loading: false,
      batteryIdTemp: -1,
      lineChartData: lineChartData.newVisitis
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList: function() {
      this.loading = true
      query(this.listQuery).then(response => {
        this.loading = false
        this.tableData = response.data.data.records
        this.listQuery.total = response.data.data.total
      })
    },
    handleClick(tab, event) {
      if (tab.paneName === 'history') {
        getHistoryById(this.batteryIdTemp).then(response => {
          if (response.data.code !== 200) {
            this.$message({
              type: 'warning',
              message: '未找到数据'
            })
          } else {
            this.historyData = response.data.data
          }
        })
      }
    },
    setMychart() {
      var myEvent = new Event('resize')
      window.dispatchEvent(myEvent)
    },

    // 搜索
    handleFind: function() {
      this.getList()
    },
    handleView(row) {
      this.vin = row.vin
      this.id = row.id
      // 设置选中的行参数，用于在弹窗头部展示
      this.selectedData = row
      this.getHistoryAAAA(this.listQuery1, row.vin)
    },
    // 换页
    handleCurrentChange: function(val) {
      this.listQuery.current = val
      this.getList()
    },
    // 换页数
    handleSizeChange(val) {
      this.listQuery.size = val
      this.getList()
    },
    // 换页
    handleCurrentChange1: function(val) {
      this.listQuery.current = val
      this.getHistoryAAAA(this.listQuery1, this.vin)
    },
    // 换页数
    handleSizeChange1(val) {
      this.listQuery.size = val
      this.getHistoryAAAA(this.listQuery1, this.vin)
    },
    refreshTopData(id) {
      getById(id).then(response => {
        this.selectedData = response.data.data
      })
    },
    getBatteryVoltage() {
      return {
        dataTime: '',
        locationStatus: '',
        batteryAllCapacity: '',
        soc: '',
        alarm: '',
        voltage1: '', voltage2: '', voltage3: '', voltage4: '', voltage5: '', voltage6: '',
        voltage7: '', voltage8: '', voltage9: '', voltage10: '', voltage11: '', voltage12: '',
        voltage13: '', voltage14: '', voltage15: '', voltage16: '', voltage17: '', voltage18: '',
        voltage19: '', voltage20: '', voltage21: '', voltage22: '', voltage23: '', voltage24: ''
      }
    },
    getHistoryAAAA(listQuery, vin) {
      getHistoryByVin(listQuery, vin).then(response => {
        if (response.data.code === 200) {
          const test = response.data.data.records
          this.batteryCapacity = []
          this.listQuery1.total = response.data.data.total

          for (let i = 0; i < test.length; i++) {
            this.batteryVoltage[i] = this.getBatteryVoltage()
            this.batteryVoltage[i]['dataTime'] = test[i].dataTime
            this.batteryVoltage[i]['locationStatus'] = test[i].locationStatus
            this.batteryVoltage[i]['batteryAllCapacity'] = test[i].batteryAllCapacity
            this.batteryVoltage[i]['soc'] = test[i].soc
            this.batteryVoltage[i]['alarm'] = test[i].alarm
            // 电池电压
            // 取前24个
            const batteryVoltageList = JSON.parse(test[i].batteryBodyVoltage).batteryVoltageList
            let x = 0
            for (let j = 0; j < batteryVoltageList.length; j++) {
              for (let k = 0; k < batteryVoltageList[j].voltageList.length; k++) {
                if (x < 24) {
                  this.batteryVoltage[i]['voltage' + (++x)] = batteryVoltageList[j].voltageList[k]
                }
              }
            }
          }
          this.dialogVisible = true
        } else {
          this.$message({
            type: 'warning',
            message: '未找到数据'
          })
        }
        this.refreshTopData(this.id)
      })
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    }
  }
}
</script>

<style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
</style>
